<!DOCTYPE html>
<html lang="zh-cn" style="height: 100%">
<head>
    <title>用户管理</title>
    <?php require 'templates/common/head.html'; ?>
    <script src="static/chart/echarts-all-3.js"></script>
    <script src="static/chart/dataTool.min.js"></script>
    <script src="static/chart/china.js"></script>
    <script src="static/chart/world.js"></script>
    <!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>-->
    <script src="static/chart/bmap.min.js"></script>
    <script src="../business/resource/js/jquery-1.11.1.min.js"></script>
    <style type="text/css">
        .panel-heading a{color: #ffffff; cursor: pointer;}

    </style>
</head>
<body style="height: 100%; margin: 0">
<div class="container-fluid">
    <?php require 'templates/common/nav.html'; ?>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <?php require 'templates/user_manage/nav.html'; ?>
        </div>
    </div>
    <button class="btn">省份</button>
    <button class="btn">科室</button>
    <button class="btn">职称</button>
</div>

<div id="container" style="height: 100%"></div>
<script>
    var province = eval('<?=$province?>');//省份
    var department = eval('<?=$department?>');//科室
    var professor = eval('<?=$professor?>');//职称
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
//    var app = {};
    //省份
    var option1 = {
        title: {
            text: '医师统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },

        visualMap: {
            min: 0,
            max: 2500,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],           // 文本，默认为数值文本
            calculable: true
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        series: {
                name: '省份',
                type: 'map',
                mapType: 'china',
                roam: false,
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data: province
            }
    };

    //科室
    var  option2 = {
        title : {
            text: '医师统计',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        series : [
            {
                name: '科室',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data: department,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    //职称
    var  option3 = {
        title : {
            text: '医师统计',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        series : [
            {
                name: '职称',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data: professor,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var option = option1;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

    $(".btn").click(function(){
        var btn = $(this).text();
        if(btn == '科室'){
            option = option2;
        }else if(btn == '职称'){
            option = option3;
        }else{
            option = option1;
        }
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    });

        myChart.on('click', function (params) {
            if(option == option1 && params.name){
                $.get('index.php?m=user_manage&a=province_hospital&province='+ encodeURIComponent(params.name), function(data){
                    var department = eval(data);//科室
                    var data1 = [];
                    var data2 = [];
                    for(var i in department){
                        data1[i] = department[i].name;
                        data2[i] = department[i].value;
                    }
                    //医院
                    var option4 = {
                        title : {
                            text: '医师统计',
                            x:'center'
                        },
                        color: ['#3398DB'],
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : data1,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            left: 'right',
                            top: 'center',
                            feature: {
                                dataView: {readOnly: false},
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        series : [
                            {
                                name:'医院',
                                type:'bar',
                                barWidth: '30%',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top'
                                    },
                                    emphasis: {
                                        show: true
                                    }
                                },
                                data:data2
                            }
                        ]
                    };
                    if (option4 && typeof option4 === "object") {
                        myChart.setOption(option4, true);
                    }
                });
            }
        });

</script>
</body>
</html>
